<!--父组件   全国地图-->
<template>
    <el-row :gutter="10">
        <el-col :span="10">
            <div class="map" id="map" style="width: 100%;height: 500px"></div>
        </el-col>
        <el-col :span="14">
            <div class="map" id="provinceMap" style="width: 100%;height: 500px;margin-top: 20px;"></div>
        </el-col>
    </el-row>
</template>
<script>
import service from '@/utils/service'
import axios from "axios";
import provinc from "./provinc.vue";
//引用地址在下方
import china from '/public/json/china.json'
import { Mapprovinces, MapprovincesText } from "./provinces.js";
export default {
    components: {
        // mapList,
        provinc
    },
    data() {
        return {
            Mapprovinces,
            MapprovincesText,
            provinceInfo: {},
            projectMapVis: false
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        // 省份点击后调用 传递 provinceInfo 参数
        getCity(params) {
            for (var i = 0; i < this.MapprovincesText.length; i++) {
                if (params.name == this.MapprovincesText[i]) {
                    //点击获取对应城市数据 
                    const name = this.Mapprovinces[i]
                    //JSON数据在下方 来源datav
                    let url = '/province/' + name + '.json';
                    axios.get(url).then(res => {
                        this.canvasProvinceMap(name, params.areaCode, res.data)
                    })
                    break;
                }
            }
        },
        //绘制
        canvasProvinceMap: function (name, areaCode, mapData) {
            let _this = this;
            const params = {
                queryRange: "province",
                queryValue: areaCode
            }
            service.get('/api/wuhan/app/data/list-total?t=').then(res => {

                const regionMapData = mapData.features;
                console.log(JSON.stringify(regionMapData));
                console.log(JSON.stringify(res.data.data));
                // return
                let projectNumData = [];
                let effectScatterData = [];
                regionMapData.filter(pl => {
                    // res.data.data.filter(al => {
                    //     if (al.areaCode == pl.properties.adcode) {
                    projectNumData.push({
                        name: pl.properties.name,
                        // value: al.num,
                        areaCode: pl.properties.adcode
                    })
                    effectScatterData.push({
                        areaCode: pl.properties.adcode,
                        name: pl.properties.name,
                        // value: al.coordinate.split(','),
                        value: pl.properties.centroid,
                        // num: al.num
                    })
                    //     }
                    // })
                })
                const provinceChart = this.$echarts.init(document.getElementById('provinceMap'), null, { renderer: 'svg' });
                this.$echarts.registerMap(name, mapData);
                //移除点击事件
                provinceChart.off('click')
                // 绘制图表
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (item) {
                            if (item.componentSubType == 'map' && item.value) {
                                return item.name + item.value
                            } else if (item.componentSubType == 'effectScatter' && item.data.num) {
                                return item.name + item.data.num
                            } else {
                                return item.name
                            }
                        },
                        show: true,
                        borderColor: '#fff',
                        padding: [4, 15],
                        textStyle: {
                            color: "#262F3F",
                            fontSize: 8
                        }
                    },
                    geo: {
                        type: 'map',
                        map: name,   //省份
                        selectedMode: false,
                        aspectScale: 0.75,
                        layoutCenter: ["50%", "50%"],
                        layoutSize: '100%',
                        roam: true, //是否平游或缩放
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 30
                        },
                        label: {
                            show: true, //区域名称样式
                            color: '#262F3F',
                            fontSize: 8
                        },
                        itemStyle: { // 区域样式
                            normal: {
                                areaColor: '#EFF4F9',// 背景
                                borderColor: '#A1AFC6',
                                borderWidth: 1
                            },
                            emphasis: { // 区域hover样式
                                areaColor: 'pink',
                                label: {
                                    color: "#262F3F",
                                    fontSize: 8,
                                }
                            },
                        },
                        select: { // 选中样式
                            itemStyle: {
                                areaColor: '#BCDAFF'
                            }
                        },
                    },
                    visualMap: {
                        show: false,
                        min: 1,
                        inRange: {
                            color: ['#BCDAFF']
                        },
                    },
                    series: [
                        {
                            type: 'map',
                            mapType: name,
                            geoIndex: 0,
                            aspectScale: 0.75,
                            layoutCenter: ["50%", "50%"],
                            layoutSize: '100%',
                            data: projectNumData
                        },
                        // 区域散点图
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            symbolSize: 3,
                            rippleEffect: { //点动画
                                color: '#0051D9',
                                period: 3,
                                scale: 3,
                                brushType: 'fill'
                            },
                            data: effectScatterData
                        }
                    ]
                };
                //散点点击事件
                provinceChart.on('click', function (params) {

                });
                provinceChart.clear();
                setTimeout(() => {
                    provinceChart.setOption(option);
                }, 300)
                window.addEventListener("resize", function () {
                    provinceChart.resize();
                });
            })
        },






        // 该需求为通过点击省份获取该省份下的所有市(二级)/区县（三级）
        init() {
            this.$echarts.registerMap('china', china);
            const provinceList = china.features;
            // axios 获取后端数据，通过循环对比获取对应的经纬度，进行标点
            /**
            let res = 'api/xxxxxxx'
            provinceList.filter(pl => {
              res.filter(al => {
                if (al.areaCode === pl.id) {
                  projectNums.push({
                    name: pl.properties.name,
                    value: al.num,
                  })
                  effectScatterData.push({
                    name: pl.properties.name,
                    value: pl.properties.cp,
                    num: al.num
                  })
                }
              })
            })
            */
            // 所需数据格式
            let projectNums = [
                // { name: '云南', value: 5 }, { name: '广西', value: 1 }
            ]; // 项目省份
            let effectScatterData = [
                // { name: '云南', value: [101.712251, 24.040609], num: 5 },
                // { name: '广西', value: [108.720004, 23.82402], num: 1 }
            ]; //散点数据
            const myChart = this.$echarts.init(document.getElementById('map'), null, { renderer: 'svg' });
            let option = {
                tooltip: {//提示框组件
                    trigger: 'item',
                    formatter: function (item) {
                        if (item.componentSubType == 'map' && item.value) {
                            return item.name + `<strong style="fontStyle:normal">${item.value}</strong>`
                        } else if (item.componentSubType == 'effectScatter' && item.data.num) {
                            return item.name + `<strong style="fontStyle:normal">${item.data.num}</strong>`
                        } else {
                            return item.name
                        }
                    },
                    show: true,
                    borderColor: '#fff',
                    padding: [4, 15],
                    textStyle: {
                        color: "#262F3F",
                        fontSize: 10
                    }
                },
                geo: {
                    map: 'china',
                    aspectScale: 0.75,
                    selectedMode: false,
                    layoutCenter: ["50%", "50%"],
                    layoutSize: '100%',
                    regions: [{
                        name: '南海诸岛',
                        itemStyle: {
                            areaColor: 'rgba(0, 10, 52, 1)',
                            borderColor: '#aee9fb',
                            normal: {
                                opacity: 0,
                                label: {
                                    show: false,
                                    color: "#009cc9",
                                }
                            },
                        },
                        label: {
                            show: false,
                            color: '#262F3F',
                            fontSize: 10,
                        },
                    }],
                },
                visualMap: {
                    show: false,
                    min: 1,
                    inRange: {
                        color: ['#EFF4F9']
                    },
                },
                series: [
                    // 常规地图
                    {
                        type: 'map',
                        mapType: 'china',
                        aspectScale: 0.75,
                        layoutCenter: ["50%", "50%"],
                        layoutSize: '100%',
                        label: {
                            show: true, //区域
                            formatter: '{b}',
                            color: '#262F3F',
                            fontSize: 10,
                        },
                        itemStyle: { // 区域样式
                            normal: {
                                areaColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#D7E0EC'
                                    }, {
                                        offset: 1, color: '#D1DBE8'
                                    }],
                                    global: false
                                },  // 背景
                                borderColor: '#A1AFC6',
                                borderWidth: 1
                            },
                            emphasis: { // 区域hover样式
                                areaColor: 'pink',
                                label: {
                                    color: "#262F3F"
                                }
                            },
                        },
                        select: { // 区域选中样式
                            itemStyle: {
                                areaColor: 'pink'
                            },
                            label: {
                                color: "#262F3F"
                            }
                        },
                        data: projectNums
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        symbolSize: 4,
                        rippleEffect: { //点动画
                            color: '#0051D9',
                            period: 3,
                            scale: 5,
                            brushType: 'fill'
                        },
                        // 坐标点
                        data: effectScatterData,
                        symbolOffset: ['-150%', '-150%'] // 光标偏移
                    },
                ]
            };
            let that = this
            myChart.on('click', function (params) {
                if (params.name == '南海诸岛') { return }
                provinceList.filter(pl => {
                    if (pl.properties.name === params.name) {
                        params.areaCode = pl.id
                    }
                })
                //点击省份显示二级或三级（市、区县地图）
                that.projectMapVis = true;
                myChart.setOption(option);
                that.provinceInfo = params  // 子组件用
                // console.log(params);
                that.getCity(params)
            });
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    }
}
</script>
